@import (reference) "../_mixins-wln.less";

/*none animate*/
.none-leave-active, .none-enter-active {
  transition: none;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/*slide-left slide-right*/
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  transform: translate(10px, 0);
}

.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  transform: translate(-10px, 0);
}

.slide-left-big-enter, .slide-left-big-leave-active {
  opacity: 0.8;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-big-leave-active, .slide-right-big-enter {
  opacity: 0.8;
  transform: translate3d(100%, 0, 0);
}
//.slide-right-big-enter {
//  z-index: 100;
//}
//.slide-left-big-leave-active {
//  z-index: 0;
//}

/*slide-down slide-up*/
.slide-down-enter, .slide-up-leave-active {
  opacity: 0;
  transform: translateY(-30%);
}
.slide-down-big-enter, .slide-up-big-leave-active {
  transform: translateY(-100%);
}

/*fade-in-up fade-in-down*/
.fade-in-down-enter-active,
.fade-in-down-leave-active,
.fade-in-up-enter-active,
.fade-in-up-leave-active{
  transition:transform 0.30s, opacity 0.30s;
}
.fade-in-up-enter,.fade-in-up-leave-to {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.fade-in-down-enter,.fade-in-down-leave-to {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}

/*slide-in-down*/
.slide-in-down-enter, .slide-in-down-leave-to {
  //opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateY(-800px); // 目前最大屏幕高度
}
.slide-in-down-enter-active, .slide-in-down-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/*slide-in-up*/
.slide-in-up-enter, .slide-in-up-leave-to {
  opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateY(800px); // 目前最大屏幕高度
}
.slide-in-up-enter-active, .slide-in-up-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/*rotateY*/
.rotateY-enter, .rotateY-leave-active {
  transform: perspective(500px) rotate3d(0, 1, 0, -90deg);
}

.rotateY-leave-active, .rotateY-enter {
  transform: perspective(-500px) rotate3d(0, 1, 0, 90deg);
}

@duration: 0.3s;
.flipY-right-enter-active {
  animation: flipInY @duration;
}

.flipY-right-leave-active {
  animation: flipOutY @duration reverse;
}

.flipY-left-enter-active {
  animation: flipOutY @duration;
}

.flipY-left-leave-active {
  animation: flipInY @duration reverse;
}

@perspective: 300vw;
@keyframes flipInY {
  from {
    transform: perspective(@perspective) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease;
  }
  to {
    transform: perspective(@perspective);
  }
}

@keyframes flipOutY {
  from {
    transform: perspective(@perspective) rotate3d(0, 1, 0, -90deg);
    animation-timing-function: ease;
  }
  to {
    transform: perspective(@perspective);
  }
}


.spin {
  animation: spin 3s infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg)
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

/*rotateY*/
//.bounceIn-enter, .bounceIn-leave-active {
//  -webkit-animation-duration: 0.75s;
//  animation-duration: 0.75s;
//  -webkit-animation-name: bounceIn;
//  animation-name: bounceIn;
//  animation-direction: reverse;
//}

//.bounceIn-leave-active, .bounceIn-enter {
//  -webkit-animation-duration: 0.75s;
//  animation-duration: 0.75s;
//  -webkit-animation-name: bounceIn;
//  animation-name: bounceIn;
//}


@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}


@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}



@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}


@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}


@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

.animated {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slideUp-enter-active, .slideUp-leave-active {
  transition: transform .3s, opacity 0.3s
}

.slideUp-enter {
  transform: translateY(100%);
  opacity: 0;
}

.slideUp-enter-to {
  transform: translateY(-50%);
  opacity: 1;
}

.slideUp-leave {
  opacity: 1;
  transform: translateY(-50%);
}

.slideUp-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
